<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-badge
					class="badge"
					value="徽标"
				></pure-badge>
			</pj-demo>

			<!-- 内置主题 -->
			<pj-demo title="内置主题">
				<pure-flex wrap>
					<pure-badge
						class="badge"
						value="主要"
						theme="primary"
					></pure-badge>
					<pure-badge
						class="badge"
						value="成功"
						theme="success"
					></pure-badge>
					<pure-badge
						class="badge"
						value="警告"
						theme="warning"
					></pure-badge>
					<pure-badge
						class="badge"
						value="危险"
						theme="danger"
					></pure-badge>
					<pure-badge
						class="badge"
						value="信息"
						theme="info"
					></pure-badge>
				</pure-flex>
			</pj-demo>

			<!-- 扩展主题 -->
			<pj-demo title="扩展主题">
				<pure-flex wrap>
					<pure-badge
						class="badge"
						value="扩展主题"
						theme="--custom-badge-theme-1"
					></pure-badge>
					<pure-badge
						class="badge"
						value="扩展主题"
						theme="--custom-badge-theme-2"
					></pure-badge>
				</pure-flex>
			</pj-demo>

			<!-- 幽灵徽标 -->
			<pj-demo title="幽灵徽标">
				<pure-flex wrap>
					<pure-badge
						class="badge"
						value="默认"
						ghost
					></pure-badge>
					<pure-badge
						class="badge"
						value="主要"
						ghost
						theme="primary"
					></pure-badge>
					<pure-badge
						class="badge"
						value="成功"
						ghost
						theme="success"
					></pure-badge>
					<pure-badge
						class="badge"
						value="警告"
						ghost
						theme="warning"
					></pure-badge>
					<pure-badge
						class="badge"
						value="危险"
						ghost
						theme="danger"
					></pure-badge>
					<pure-badge
						class="badge"
						value="信息"
						ghost
						theme="info"
					></pure-badge>
					<pure-badge
						class="badge"
						value="扩展"
						ghost
						theme="--custom-badge-theme-1"
					></pure-badge>
				</pure-flex>
			</pj-demo>

			<!-- 镂空徽标 -->
			<pj-demo title="镂空徽标">
				<pure-flex wrap>
					<pure-badge
						class="badge"
						value="默认"
						plain
					></pure-badge>
					<pure-badge
						class="badge"
						value="主要"
						plain
						theme="primary"
					></pure-badge>
					<pure-badge
						class="badge"
						value="成功"
						plain
						theme="success"
					></pure-badge>
					<pure-badge
						class="badge"
						value="警告"
						plain
						theme="warning"
					></pure-badge>
					<pure-badge
						class="badge"
						value="危险"
						plain
						theme="danger"
					></pure-badge>
					<pure-badge
						class="badge"
						value="信息"
						plain
						theme="info"
					></pure-badge>
					<pure-badge
						class="badge"
						value="扩展"
						plain
						theme="--custom-badge-theme-1"
					></pure-badge>
				</pure-flex>
			</pj-demo>

			<!-- 圆点模式 -->
			<pj-demo title="圆点模式">
				<pure-flex wrap>
					<pure-badge
						class="badge"
						value="默认"
						mode="dot"
					></pure-badge>
					<pure-badge
						class="badge"
						value="主要"
						mode="dot"
						theme="primary"
					></pure-badge>
					<pure-badge
						class="badge"
						value="成功"
						mode="dot"
						theme="success"
					></pure-badge>
					<pure-badge
						class="badge"
						value="警告"
						mode="dot"
						theme="warning"
					></pure-badge>
					<pure-badge
						class="badge"
						value="危险"
						mode="dot"
						theme="danger"
					></pure-badge>
					<pure-badge
						class="badge"
						value="信息"
						mode="dot"
						theme="info"
					></pure-badge>
					<pure-badge
						class="badge"
						value="扩展"
						mode="dot"
						theme="--custom-badge-theme-1"
					></pure-badge>
				</pure-flex>
			</pj-demo>

			<!-- 溢出模式 -->
			<pj-demo title="溢出模式">
				<pure-flex wrap>
					<pure-badge
						class="badge"
						value="68"
						mode="overflow"
						theme="primary"
					></pure-badge>
					<pure-badge
						class="badge"
						value="99"
						mode="overflow"
						theme="success"
					></pure-badge>
					<pure-badge
						class="badge"
						value="168"
						mode="overflow"
						theme="warning"
					></pure-badge>
				</pure-flex>
			</pj-demo>

			<!-- 切割模式 -->
			<pj-demo title="切割模式">
				<pure-flex wrap>
					<pure-badge
						class="badge"
						value="68"
						mode="limit"
						theme="primary"
					></pure-badge>
					<pure-badge
						class="badge"
						value="99"
						mode="limit"
						theme="success"
					></pure-badge>
					<pure-badge
						class="badge"
						value="999"
						mode="limit"
						theme="warning"
					></pure-badge>
					<pure-badge
						class="badge"
						value="1000"
						mode="limit"
						theme="danger"
					></pure-badge>
					<pure-badge
						class="badge"
						value="1688"
						mode="limit"
						theme="info"
					></pure-badge>
				</pure-flex>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup></script>

<style lang="scss" scoped>
	.page {
		--page-layout-background: var(--pure-background-default);

		// 扩展按钮主题
		--custom-badge-theme-1: #00a783;
		--custom-badge-theme-2: #9900ff;

		.badge {
			font-size: var(--pure-font-size-small);
		}
	}
</style>
